{
    // 转换字符串如下
    // 20200819155130 =》2020年08月19日 15:51:30
    console.time('trans')
    function transformStr(str) {
        let arr = []
        let obj = {
            '0': '年',
            '1': '月',
            '2': '日',
            '3': ' ',
            '4': ':',
            '5': ':'
        }

        for (let i = 0; i < str.length; i += 2) {
            if (i === 0) {
                arr.push(str.slice(i, i + 4))
            } else {
                arr.push(str.slice(i, i + 2))
            }
        }

        return arr.reduce((lastRes, item, index) => {
            lastRes += item
            obj[index] ? lastRes += obj[index] : lastRes
            return lastRes
        }, '')
    }
    console.timeEnd('trans')

    console.time('trans')
    function transformStr(str) {
        let match = /(?<year>\d{4})(?<month>\d{2})(?<day>\d{2})(?<hour>\d{2})(?<minute>\d{2})(?<second>\d{2})/g.exec(str);

        let timeMap = {
            'year': '年',
            'month': '月',
            'day': '日 ',
            'hour': ':',
            'minute': ':',
            'second': ''
        }
        return Object.entries(match.groups).reduce((lastRes, [key, value]) => {
            lastRes += (value + timeMap[key])
            return lastRes
        }, '')
    }
    console.timeEnd('trans')

    console.log(transformStr('20200819155130'));

    // 遍历代码写的多一些，性能相对好，正则代码写得少，性能相对差一些
}

{
    // [url1, url2, ...] request or fetch请求 要求快速请求 快速返回，并且保证顺序
    function fetchData(urls = []) {
        return new Promise((resolve, reject) => {
            let result = []
            let count = 0
            urls.forEach((url, idx) => {
                fetch(url).then(res => {
                    count++
                    result[idx] = res
                    if (count === urls.length) {
                        resolve(result)
                    }
                })
            })
        })
    }
}

{
    // 加载性能优化有哪些手段？比如以这两个网页为例 https://www.oklink.com 和 https://www.oklink.com/btc
    // 1 资源压缩与合并 如html css压缩
    //   1）html-webpack-plugin插件可以分离html 并配置html压缩，移除注释，删除空白符与换行符，去除属性引用等
    //   2）mini-css-extract-plugin抽离css，并压缩
    // 2 减少 HTTP 的请求次数和传输报文的大小
    //   1）css sprite（雪碧图、图片精灵）技术
    //   2）使用字体图标（icon font）或者 SVG 等矢量图
    //   3 浏览器有并发请求数量限制，尽量限制在范围之内
    // 3 缓存
    //   1）建立E-Tag和Catch-Control http缓存机制
    //   2）DNS缓存或者预解析处理（DNS PREFETCH），减少DNS查找过程
    //      DNS查找过程：浏览器缓存->本机缓存（host文件）->路由器缓存->运营商服务器缓存->根域名服务器缓存->顶级域名服务器缓存->主域名服务器缓存
    //   3）设置本地缓存把不长改变的数据放在本地（localStorage indexDB）或者直接上PWA
    //   4）建立TCP长链接 Connection: keep-alive
    //   5）使用http2代替http1.1 多路复用代替长链接，多路不用可以并发多个请求，而http1.1的长链接会阻塞请求
    // 4 异步加载模块 如项目用到echarts图标，不必全部加载，窗口加载到哪里动态加载即可，这里可以用commonjs代替es6 module （前者是运行时加载，后者是编译时加载）
}

{
    // 虚拟dom据具体是怎么实现的，说出理解
    // 1 为什么需要虚拟DOM？
    // DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM操作引起的。
    // 其实前端主要就是维护状态和更新视图；而更新视图和维护状态都需要DOM操作，所以虚拟DOM出现了
    // 2 什么是虚拟DOM？
    // 虚拟DOM其实可以简单的理解为用js对象去描述DOM的树形结构，操作js对象最后去更新一次性更新DOM。
    // 操作dom是昂贵的，但是操作js对象是很快的，这个样就大大减少了操作DOM的频率，最后在更新DOM大大提升了性能
    // 3 dom-diff 就是对比新老dom结构，得到最小化差异的补丁包pacth，最后将这个补丁包pacth更新到真实dom
    // 具体简单的实现，见代码
}